<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="/admin/include :: head">
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--<div ></div>-->
<section class="ftco-section">
    <div id="vueController" style="margin-left: 20px">
        <h2>产品类型管理</h2>
        <el-divider></el-divider>
        <el-button type="primary" @click="handleAddDialog()">新增</el-button>
        <el-table :data.sync="dataList" style="margin-top: 20px" border >

            <el-table-column prop="id" label="id" width="180">
            </el-table-column>
            <el-table-column prop="name" label="产品类型" width="180">
            </el-table-column>
            <el-table-column prop="order" label="顺序" width="180">
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleEditDialog(scope.$index, scope.row)">编辑
                    </el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除
                    </el-button>

                </template>
            </el-table-column>
        </el-table>
        <el-dialog :title="edit?'修改':'新增'" :visible.sync="dialogFormVisible">
            <el-form :model="form">
                <el-form-item label="产品类型">
                    <el-input v-model="form.name" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="顺序">
                    <el-input v-model="form.order" autocomplete="off"></el-input>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">提交</el-button>
            </div>
        </el-dialog>
    </div>
</section>

</body>
<script type="module">
    import {getProductTypeList, saveProductType, delProductType} from "/static/js/api/productApi.js";

    new Vue({
        el: '#vueController',
        data() {
            return {
                dataList: [],
                fileList: [],
                dialogFormVisible: false,
                edit:false,
                form: {},
                formTemplate: {
                    id: "",
                    order: undefined,
                    name: "",
                },
            }
        },
        created() {
            this.getList();
        },
        methods: {
            getList() {
                getProductTypeList().then(res => {
                    console.log(res)
                    this.dataList = res.data;
                })
            },
            handleAddDialog() {
                this.form = Object.assign({}, this.formTemplate);
                this.edit =false;
                this.dialogFormVisible = true;

            },
            handleEditDialog(index, row) {
                this.form = Object.assign({}, row);
                this.edit =true;
                this.dialogFormVisible = true;
            },
            handleDelete(index, row) {
                delProductType(row.id).then(res => {
                    console.log("删除成功");
                    this.getList();
                })
            },
            handleSubmit() {
                saveProductType(this.form).then(res => {
                    console.log("添加成功");
                    this.getList();
                })
                this.fileList = [];
                this.dialogFormVisible = false;

            },
        }

    })
</script>
</html>